<template>
	<!-- 相关考点 -->
	<el-dialog title="相关考点" :visible.sync="examVisible" width="70%" @close="handleClose">
		<div>
			<el-table :data="examData" border class="table margin-bottom20" ref="multipleTable"
				header-cell-class-name="table-header-style">
				<el-table-column prop="title" label="标题" align="center"></el-table-column>
				<el-table-column prop="content" label="考点内容" align="center" :show-overflow-tooltip="true" width="500"
					height="100">
					<template slot-scope="scope">
						<span v-html="scope.row.content" class="line1"></span>
					</template>
				</el-table-column>
				<el-table-column prop="key" label="口诀" align="center" width="200" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<span class="line1">{{scope.row.key}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="添加时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center" width="100">
					<template slot-scope="scope">
						<span class="blue-text" @click="examDel(scope.row.id)">删除</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="row-me row-center flex-wrap margin-bottom20">
				<el-select clearable placeholder="请选择考点分类" v-model="examQuery.categoryId" class="width260 margin-right20">
					<el-option v-for="(item,index) in examCategoryData" :key="index" :label="item.name"
						:value="item.id"></el-option>
				</el-select>
				<el-input class="width260 margin-right20" v-model="examQuery.title" suffix-icon="el-icon-search"
					placeholder="请输入相关考点标题" @change="getPageQueryQuestionPoints">
				</el-input>
				<el-button type="primary" @click="getPageQueryQuestionPoints">搜索</el-button>
			</div>
			<el-button type="primary" class="margin-bottom20" @click="clickAdd">确认添加</el-button>
			<el-table :data="tableExamtData" border class="table" ref="multipleTable"
				header-cell-class-name="table-header-style" @selection-change="handleSelectionExamChange">
				<el-table-column type="selection" width="55" align="center" :selectable="selectable">
				</el-table-column>
				<el-table-column label="序号" width="55" align="center">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="title" label="标题" align="center"></el-table-column>
				<el-table-column prop="content" label="考点内容" :show-overflow-tooltip="true" width="500">
					<template slot-scope="scope">
						<span v-html="scope.row.content" class="line1"></span>
					</template>
				</el-table-column>
				<el-table-column prop="key" label="口诀" align="center" width="200"></el-table-column>
				<el-table-column prop="createTime" label="添加时间" align="center"></el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="examQuery.pageNumber"
					:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeExamChange" :page-size="examQuery.pageSize"
					:total="examPageTotal" @current-change="handlePageExamChange"></el-pagination>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose" type="primary">关 闭</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				examVisible: false,
				examData: [],
				tableExamtData: [],
				examQuery: {
					pageNumber: 1,
					pageSize: 10
				},
				examPageTotal: 0,
				examId: '',
				multipleSelection: [],
				examCategoryData: []
			}
		},
		methods: {
			handleClose() {
				this.examVisible = false
				this.$emit('handleExamOk')
			},
			//获取考点分类下拉
			async getCategoryData() {
				const res = await this.$get('/admin/questionPoints/pageQueryPointsCategory', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.examCategoryData = res.data.list
				}
			},
			async clickAdd() {
				let val = this.multipleSelection
				if (val.length != 0) {
					const res = await this.$postForm('/admin/question/saveQuestionPoints', {
						id: this.examId,
						pointsId: val[0].id
					})
					if (val[0].id && val[0].id != '') {
						for (let item of this.tableExamtData) {
							if (item.id == val[0].id) {
								this.examData.push(item)
							}
						}
					}
				}
			},
			selectable() {
				if (this.examData.length == 0) {
					return true
				} else {
					return false
				}
			},
			show(row) {
				this.examVisible = true
				this.getCategoryData()
				this.getPageQueryQuestionPoints()
				setTimeout(() => {
					this.getExam(row)
				}, 500)
			},
			getPageQueryQuestionPoints() {
				this.$get('/admin/questionPoints/pageQueryQuestionPoints', this.examQuery).then(res => {
					this.tableExamtData = res.data.list
					this.examPageTotal = res.data.totalRow
				})
			},
			getExam(row) {
				this.examId = row.id
				this.examData = []
				if (row.pointsId && row.pointsId != '') {
					for (let item of this.tableExamtData) {
						if (item.id == row.pointsId) {
							this.examData.push(item)
						}
					}
				}
				console.log(this.examData, this.tableExamtData, "this.tableExamtData")
			},
			// 分页
			handleSizeExamChange(val) {
				this.examQuery.pageSize = val
				this.getPageQueryQuestionPoints()
			},
			handlePageExamChange(val) {
				this.examQuery.pageNumber = val
				this.getPageQueryQuestionPoints()
			},
			// 删除
			async examDel(id) {
				const res = await this.$postForm('/admin/question/deleteQuestionPoints', {
					id: this.examId,
					pointsId: id
				})
				this.$message.success('删除成功')
				this.examData = []
				this.$refs.multipleTable.clearSelection()
			},
			handleSelectionExamChange(val) {
				if (val.length > 1) {
					this.$refs.multipleTable.clearSelection();
					this.$refs.multipleTable.toggleRowSelection(val.pop());
				}
				this.multipleSelection = val
			},
		}
	}
</script>

<style>
</style>